Day17:jQuery介紹（二）

第 12 屆 iThome 鐵人賽

DAY 17

Modern Web

小白的JavaScript讀書日記系列第 17 篇

12th鐵人賽

q20038848

2020-09-18 00:05:15

1100 瀏覽

分享至

Day16的小練習

<body>
 <p>This is P</p>
 <p id="test">This is ID</p>
 <p class="test">This is Class</p>
 <button class="p">Click me to hide All</button>
 <button id="hId">Click me to hide ID</button>
 <button class="hClass">Click me to hide Class</button>
<script>

    $(document).ready(function(){
        $(".p").click(function(){
            $("p").hide()
        });
        $("#hId").click(function(){
            $("#test").hide()
        });
        $(".hClass").click(function(){
            $(".test").hide()
        });
    });
</script>
</body>

以上可以實現案對應的按鈕就消失囉，但我想實作中應該是用不到吧...
當作是複習選擇器的概念啦~開始今天的內容吧

基本事件

之前有講過事件了，這邊我們用jQuery來寫看看，
步驟基本上一樣，這邊再透過jQuery複習一下:

選取id
$('#id')
加入事件
$('#id').click()
在事件中加入不具名函式
$('#id').click(function(){});
再加上需要執行的程式
$('#id').click(function(){ $('.p').hide() });

以上，有沒有很熟悉呢!，Day16的例子中有用到呦!

今天我們透過程式碼來看更多的事件吧!

<body id="events">
<div class="wrapper">
	<div class="content">
			<div class="main">
		<h1>Events</h1>
		<p><a href="#">A Link</a></p>
        <input name="button" type="button" id="button" value="A Button">
		<input name="textfield" id="textfield" type="text" placeholder="Click InputBox!">
		</div>
	</div>
</div>
<script>
    $(document).ready(function(){
        //任意點選頁面兩下會出現Good day視窗
        $('html').dblclick(function(){
            alert('Good day!')
        });

        //當滑鼠滑動到有連結的地方，將You moused over a link文字增加到<div class="main">裡面
        $('a').mouseover(function(){
            let message = "<p>You moused over a link</p>";
            $('.main').append(message);
        });

        //點擊按鈕時，將按鈕 A Button 替換成 "Stop that!
        $('#button').click(function(){
            $(this).val("Stop that!");
        });

        //點選到inputBox，將其背景更改為黃色
        $('#textfield').focus(function(){
            $(this).css("background-color", "yellow")
        });
    })
</script>
</body>

上述例子示範了一些基本的方法，dbclick()、mouseover、click()、focus()...等，執行前別忘了記的載入jQuery哦。
同時也附上jQuery官網對事件的介紹，有興趣的朋友可以參考參考~
https://learn.jquery.com/events/

進階事件

由於範例越來越長了～這邊我也開始練習使用CodePen
提醒一下，在CodePen裡面的JS如果要使用jQuery記得要載入噢！
載入方法如下：
1.點選小齒輪

2.將cdn複製到紅色底線處，然後記得保存！

CodePen範例
有使用到is()，slideDown()，fadeOut()...等，來呈現問答的感覺
這邊用is()來判斷是否該元素存在。
我們可以在w3c中看到更多jQuery的介紹jQuery

今日總結

今天用到了jQuery的事件來寫了兩個範例，在最後附上的w3c中，有更多的資訊可以去練習看看呦！
我想jQuery到這邊應該差不多了，透過幾個簡單的例子，可以發現比寫純JS來得更省事，程式碼更簡短，
更多的例子網路上都有，特別是w3c！真心覺得有w3c對新手（我）真的是幫助太大了！

p.s.:今天的範例都是參照『JavaScript&jQuery the missing manual』這本書，以及w3c的範例做修改～